<template>
	<view class="content">
		<view class="menu">
			  <uni-segmented-control :current="current" :values="itemValue" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in list" :key="item.id">
				<view class="pic">
					<image lazy-load :src= "item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{"作者:"+ item.author}}</view>
				<view class="text">{{"内容:"+ item.content}}</view>
				<view class="text">{{"来源:"+ item.source}}</view>
				<view class="text">{{"类型:"+ item.type}}</view>
			</view>
			
			<view class="bottom">
				<view class="item" @click="refshClick">
					<uni-icons type="contact" size="30"></uni-icons>
				</view>
				<view class="item" @click="topClick">
					<uni-icons type="info" size="30"></uni-icons>
				</view>
			<!-- 	<view class="box"></view> -->
			</view>
			
			<view class="loadMore">
				<uni-load-more status="loading"></uni-load-more>
			</view>
		</view>
	</view>
</template> 

<script setup>
import { computed } from 'vue';
const title = ref("xiaowen")
let page = 1
let list = ref([])
let current = ref(0)
let item1 = [{key:"all",value:"全部"},
{key:"dog",value:"狗"},
{key:"cat",value:"猫"}]
const itemValue = computed(()=>item1.map(item=>item.value))


function network(){
	//uni.showLoading()
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		// header: {
		// 	'access-key':"905313"
		// },
		method:'GET',
		data: {
			size: 10,
			type: item1[current.value].key
			
		}
	}).then((e)=>{
		console.log(e)
		// if (page == 1) {
		// 	list.value = e.data.data
		// } else {
			list.value = [...list.value,...e.data.data]
		//}
		
	}).catch((e)=>{
		console.log(e) 
	}).finally(()=>{  
		uni.stopPullDownRefresh()
		//uni.hideLoading()
	})
}
network()

function onClickItem(e){
	current.value = e.currentIndex
	list.value = []
	console.log(e)
	network()
}


function onPreview(index){
	console.log(index)
	let urls = list.value.map(item =>item.url)
	
	uni.previewImage({
		current:index,
		urls:urls
	})
}

function refshClick(){
	console.log("下拉刷新")
	page = 1
	uni.startPullDownRefresh()
	
}

function topClick(){
	console.log("回到顶部")
	uni.pageScrollTo({
		scrollTop:0
	})
}
onPullDownRefresh(()=>{
	console.log("下拉刷新")
	list.value = []
	current.value = 0
	network()
})

onReachBottom(()=>{
    console.log("上拉加载")
	page++
	network()
})



</script>

<style lang="scss" scoped>
	.content {
		.layout {
			padding: 50rpx;
		}
		.box {
			.pic {
				image {
					width: 100%;
				}
			}
			.text {
				padding: 30rpx;
				font-size: 40rpx;
				color: rosybrown;
			}
			margin-bottom: 60rpx;
			box-shadow: 0 10rpx 30rpx rgb(0, 0, 0,0.1);
			border-radius: 10rpx;
			overflow: hidden;
			// background-color: blue;
		}
		.bottom {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom:  env(safe-area-inset-bottom);
			.item {
				width:90rpx;
				height:90rpx;
				font-size: 20;
				margin-bottom: 20rpx;
				color: darkred;
				background-color: greenyellow;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				border: 1px solid red;
			}
			// .box {
			// 	border: 1px solid red;
			// 	height: env(safe-area-inset-bottom);
			// }
		}
		.loadMore {
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}
	.menu {
		padding: 50rpx 50rpx 0;
	}

</style>
